import type {
  InputTypeHTMLAttribute,
  InputHTMLAttributes,
  TextareaHTMLAttributes,
} from "vue";

import type { Size, Color } from "../ui/types";

type FieldType =
  | InputTypeHTMLAttribute
  | "select"
  | "textarea"
  | "calendar"
  | "calendar-dropdown"
  | "markdown";

export type FieldAttributesMap<T extends FieldType> = T extends "textarea"
  ? TextareaHTMLAttributes
  : T extends "select" | "calendar" | "calendar-dropdown"
  ? Record<string, any>
  : InputHTMLAttributes;

interface BaseFormField<T extends FieldType = "text"> {
  name: string;
  type?: T;
  label?: string;
  description?: string;
  options?: { label: string; value: string }[];
  inputAttributes?: FieldAttributesMap<T>;
  color?: Color;
  size?: Size;
}

export type FormField = BaseFormField<FieldType>;

export type FormFields = (Array<FormField> | FormField)[];
/* checkbox */
export type CheckboxColor = Color;
/* radio */
export type RadioColor = CheckboxColor;
